import React, { useState } from 'react';
import { Layout, Menu, Typography, Card, Space } from 'antd';
import { 
  DashboardOutlined,
  UserOutlined,
  SafetyCertificateOutlined,
  ApiOutlined,
  DatabaseOutlined,
  SettingOutlined,
  BarChartOutlined,
  BugOutlined
} from '@ant-design/icons';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import { useNavigate, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';

const { Sider, Content } = Layout;
const { Title } = Typography;

interface AdminLayoutProps {
  children: React.ReactNode;
}

const AdminLayout: React.FC<AdminLayoutProps> = ({ children }) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);

  // 根据当前路径确定选中的菜单项
  const getCurrentMenuKey = () => {
    const path = location.pathname;
    if (path.startsWith('/admin/dashboard')) return 'dashboard';
    if (path.startsWith('/admin/users')) return 'users';
    if (path.startsWith('/admin/roles')) return 'roles';
    if (path.startsWith('/admin/permissions')) return 'permissions';
    if (path.startsWith('/admin/system')) return 'system';
    if (path.startsWith('/admin/crawlers')) return 'crawlers';
    return 'dashboard';
  };

  const menuItems = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: '仪表板',
      onClick: () => navigate('/admin/dashboard')
    },
    {
      key: 'users',
      icon: <UserOutlined />,
      label: '用户管理',
      onClick: () => navigate('/admin/users')
    },
    {
      key: 'roles',
      icon: <SafetyCertificateOutlined />,
      label: '角色管理',
      onClick: () => navigate('/admin/roles')
    },
    {
      key: 'permissions',
      icon: <ApiOutlined />,
      label: '权限管理',
      onClick: () => navigate('/admin/permissions')
    },
    {
      key: 'crawlers',
      icon: <BugOutlined />,
      label: '爬虫管理',
      onClick: () => navigate('/admin/crawlers')
    },
    {
      key: 'system',
      icon: <SettingOutlined />,
      label: '系统配置',
      onClick: () => navigate('/admin/system')
    }
  ];

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.3 }}
    >
      <Layout style={{ 
        minHeight: 'calc(100vh - 64px)',
        background: theme.layoutBackground,
        borderRadius: '12px',
        overflow: 'hidden',
        boxShadow: theme.cardShadow
      }}>
        <Sider 
          collapsible 
          collapsed={collapsed} 
          onCollapse={setCollapsed}
          style={{
            background: theme.siderBackground,
            borderRight: `1px solid ${theme.siderBorderColor}`,
            height: '100%',
            backdropFilter: 'blur(25px)'
          }}
          width={240}
          collapsedWidth={80}
        >
          <motion.div 
            style={{ 
              padding: '20px', 
              color: theme.textPrimary,
              borderBottom: `1px solid ${theme.siderBorderColor}`,
              background: theme.siderHeaderBackground
            }}
            whileHover={{ 
              scale: 1.02,
              transition: { duration: 0.2 } 
            }}
            initial={{ scale: 0.8 }}
            animate={{ scale: 1 }}
            transition={{ 
              type: "spring", 
              stiffness: 260, 
              damping: 20 
            }}
          >
            <Title level={collapsed ? 5 : 4} style={{ 
              color: theme.textPrimary, 
              margin: 0,
              textAlign: 'center'
            }}>
              {collapsed ? '管理' : '后台管理'}
            </Title>
          </motion.div>
          <Menu
            mode="inline"
            selectedKeys={[getCurrentMenuKey()]}
            items={menuItems}
            style={{
              background: theme.siderBackground,
              border: 'none',
              marginTop: 8
            }}
            theme={mode === 'dark' ? 'dark' : 'light'}
            onSelect={({ key }) => {
              // 添加菜单项点击动画效果
              const selectedItem = document.querySelector(`[data-menu-id="${key}"]`);
              if (selectedItem) {
                selectedItem.animate([
                  { transform: 'scale(1)' },
                  { transform: 'scale(0.95)' },
                  { transform: 'scale(1)' }
                ], {
                  duration: 300,
                  easing: 'ease-in-out'
                });
              }
              
              const item = menuItems.find(i => i.key === key);
              if (item && item.onClick) {
                item.onClick();
              }
            }}
          />
        </Sider>
        <Layout>
          <Content style={{ 
            padding: 24, 
            margin: 0, 
            minHeight: 280,
            background: theme.contentBackground
          }}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3 }}
              exit={{ opacity: 0, y: -20 }}
            >
              <Card 
                style={{
                  background: theme.cardBackground,
                  borderColor: theme.cardBorder,
                  borderRadius: '12px',
                  boxShadow: theme.cardShadow,
                  height: '100%',
                  overflow: 'hidden'
                }}
                bodyStyle={{ padding: 0 }}
              >
                <div style={{ padding: 24 }}>
                  <Space direction="vertical" style={{ width: '100%' }} size="large">
                    {children}
                  </Space>
                </div>
              </Card>
            </motion.div>
          </Content>
        </Layout>
      </Layout>
    </motion.div>
  );
};

export default AdminLayout;